<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" show-refresher-update-time @query="queryList">
			<template #top>
				<uv-navbar title="学校活动" leftIcon="" :titleStyle="{'font-weight': '700','font-size': '18px'}"
					:placeholder="true" :safeAreaInsetTop="true"></uv-navbar>
			</template>

			<view class="card" v-for="(item,index) in dataList" :key="index">
				<view class="flex_start" style="gap: 20rpx;">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
						<path
							d="M1.32319 1.41609C1.82435 1.23368 2.16614 1.39306 2.34856 1.89423L9.61893 21.8694C9.80134 22.3706 9.64196 22.7124 9.14079 22.8948C8.63962 23.0772 8.29783 22.9178 8.11542 22.4166L0.845047 2.44146C0.662636 1.94029 0.822016 1.5985 1.32319 1.41609Z"
							fill="#F2702D" />
						<path
							d="M2.76343 3.67658C5.824 1.84801 8.41257 0.933728 10.5303 0.933728C13.7051 0.933728 15.6663 2.17601 18.2857 2.17601C20.032 2.17601 21.7371 1.53258 23.4023 0.245728V11.9143C22.7097 13.1863 21.3109 13.8217 19.2057 13.8217C16.048 13.8217 15.0366 13.0709 11.6857 13.0709C9.45143 13.0709 7.93714 13.9257 7.14514 15.6332L2.76343 3.67658Z"
							fill="#F2702D" />
					</svg>
					<view class="item-title">{{ item.name }}</view>
				</view>
				<view class="flex_start" style="gap: 20rpx;">
					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
						<path
							d="M9.00002 1.498C9.98601 1.4951 10.9628 1.68716 11.8743 2.06314C12.7858 2.43913 13.614 2.99161 14.3112 3.68881C15.0084 4.38602 15.5609 5.21418 15.9369 6.12568C16.3129 7.03718 16.5049 8.01401 16.502 9C16.5049 9.986 16.3129 10.9628 15.9369 11.8743C15.5609 12.7858 15.0084 13.614 14.3112 14.3112C13.614 15.0084 12.7858 15.5609 11.8743 15.9369C10.9628 16.3128 9.98601 16.5049 9.00002 16.502C8.01403 16.5049 7.03719 16.3128 6.12569 15.9369C5.2142 15.5609 4.38603 15.0084 3.68883 14.3112C2.99162 13.614 2.43914 12.7858 2.06316 11.8743C1.68718 10.9628 1.49511 9.986 1.49802 9C1.49511 8.01401 1.68718 7.03718 2.06316 6.12568C2.43914 5.21418 2.99162 4.38602 3.68883 3.68881C4.38603 2.99161 5.2142 2.43913 6.12569 2.06314C7.03719 1.68716 8.01403 1.4951 9.00002 1.498ZM8.65902 5.59C8.24902 5.59 7.97702 5.863 7.97702 6.272V9.682C7.97702 10.092 8.25002 10.364 8.65902 10.364H12.069C12.479 10.364 12.751 10.091 12.751 9.682C12.751 9.272 12.478 9 12.069 9H9.34102V6.272C9.34102 5.862 9.06802 5.59 8.65902 5.59Z"
							fill="#F2702D" />
					</svg>
					<view class="item-time">{{ '报名时间：' + item.start_time + '至' + item.end_time }}</view>
				</view>
				<view class="item-price">{{ '单价：￥' + item.price }}</view>
				<view class="flex_end" style="padding-right: 20rpx;">
					<view class="item-btn">
						<view v-if="item.plan_status != '4'">
							<uv-button :text="item.pay_status != '1'&& item.plan_status != '4'  ? '去缴费' : '已缴费'"
								type="primary" size="small"  :disabled="item.pay_status == '1'"
								@click="toPaySingle(item.id)"></uv-button>
						</view>
					</view>
				</view>
			</view>

			<template #bottom>
				<view class="footer-card">
					<uv-button class="btn" text="一键全缴" type="primary" @click="toPayAll()"></uv-button>
				</view>
			</template>

		</z-paging>
	</view>
</template>

<script>
	import {
		getList,
		checkPayStatus
	} from '@/api/school'
	export default {
		data() {
			return {
				dataList: []
			}
		},

		onLoad() {
			const user_info = uni.getStorageSync('stu_info')
			if (user_info == '') {
				this.$tab.reLaunch('/')
			}
		},
		methods: {
			queryList(pageNo, pageSize) {

				const params = {
					page: pageNo,
					limit: pageSize,
					id: uni.getStorageSync('stu_info').stuId
				}
				getList(params).then(res => {
					this.$refs.paging.complete(res.data.list);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			toPaySingle(id) {
				// const eventChannel = this.getOpenerEventChannel();  测试代码
				this.$tab.navigateTo(`/pages/pay/paySingle?id=${id}`)
				/* checkPayStatus({ids: id, id: uni.getStorageSync('stu_info').stuId}).then(res => {
					if (res.data.length != 0) {
					} else {
					}
				}) */
			},
			toPayAll() {
				let arr = []
				const baseData = this.dataList
				const v = baseData.filter(item => item.pay_status != '1' && item.plan_status != '4');
				if (v) {
					v.map(item => {
						arr.push(item.id)
					})
				}

				this.$tab.navigateTo(`/pages/pay/payAll?id=${arr}`)
				/* checkPayStatus({ids: arr}).then(res => {
					console.log(res);
				}) */
			}
		}
	}
</script>

<style lang="scss">
	
	.card {
		// padding: 10rpx 20rpx;
		width: 90%;
		margin: 0 auto;
		// border-bottom: 1px solid #F0F2F5;
		background: linear-gradient(to bottom, rgba(242, 112, 45, 0.5), rgba(242, 112, 45, 0), rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));

		border-radius: 20rpx;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		padding: 20rpx 20rpx;
		margin-bottom: 30rpx;
		
		.item-title {
			// color: #50A3F1;
			color: #F2702D;
			font-size: 14px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			margin-bottom: 33rpx;
		}

		.item-price {
			color: #F00;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			margin-bottom: 33rpx;
		}

		.item-time {
			color: rgba(0, 0, 0, 0.50);
			font-size: 12px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			margin-bottom: 33rpx;
		}

		.item-btn {
			width: 50px;
		}
	}

	.footer-card {
		width: 90%;
		margin: 0 auto;
		background-color: #ffffff;

		.btn {
			margin: 50rpx 0;
		}
	}

	.flex_end {
		display: flex;
		justify-content: end;
		align-items: flex-end;
	}

	.flex_start {
		display: flex;
		justify-content: start;
		align-items: flex-start;
	}
</style>